<template>
  <div v-if="playlist">
    <Header></Header>
    <!-- 播放区域 -->
    <div class="content">
      <video :src="playlist.content" width="100%" controls></video>
      <div class="title">
        <span
          ><van-button
            type="info"
            icon="fire-o"
            round
            size="mini"
            color="#e7e7e7"
            >热门</van-button
          ></span
        >
        <span>{{ playlist.name }}</span>
      </div>
      <div class="date">
        <span class="a">{{ playlist.userinfo.name }}</span>
        <span class="b">100万次观看</span>
        <span class="c">999弹幕</span>
        <span class="d">{{ playlist.date }}</span>
      </div>
      <!-- 点赞缓存 -->
      <div class="share">
        <span><van-icon name="star" />收藏</span>
        <span><van-icon name="down" />缓存</span>
        <span><van-icon name="share" />分享</span>
      </div>
      <!-- 推荐评论 -->
      <div>
        <van-tabs
          title-active-color="#fb7299"
          title-inactive-color="black"
          line-height="0"
        >
          <van-tab title="推荐">
            <div class="item">
              <div
                class="img"
                v-for="(item, index) in commendList"
                :key="index"
              >
                <!-- 播放量 -->
                <span class="span">播放量：10.6万</span>
                <img
                  :src="item.img"
                  style="width:100%"
                  alt=""
                  @click="toPlayPage(item.id)"
                />
                <!-- 描述 -->
                <p class="name">{{ item.name }}</p>
              </div>
            </div>
          </van-tab>
          <van-tab title="评论(401)">
            <div>
              <div class="input" v-if="userInfo.id !== 0">
                  <img :src="userInfo.user_img" alt="" class="img" />
                  <input type="text" placeholder="请说点什么吧。。。" class="ipt" v-model="commentInfo.comment_content" />
                  <button class="btn" @click="commnet(commentInfo.comment_content)">发表</button>
              </div>
              <!-- 内容区域 -->
              <div v-for="(item,index) in commentList" :key="index">
                <div class="comment-up">
                  <img :src="userInfo.user_img" alt="" class="img">
                  <span class="a">{{item.userinfo.name}}</span>
                  <span class="b">{{item.comment_date}}</span>
                </div>
                  <div class="comment-down">
                  <p>
                    {{item.comment_content}}
                  </p>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/view/Header.vue";
export default {
  components: {
    Header
  },
  data() {
    return {
      playlist: null,
      commendList: [],
      userInfo:[],
      commentList: [],
      commentInfo:{
        comment_content: '',
        comment_date: '',
        article_id: null,
        parent_id:null
      }
    };
  },
  created() {
    this.getPlayInfo();
    this.getCommend();
    this.getUserInfo();
    this.getComment()
  },
  methods: {
    // 获取播放页面详细数据
    async getPlayInfo() {
      const res = await this.$http.get(`/article/${this.$route.params.id}`);
      // console.log(res);
      this.playlist = res.data[0];
    },
    // 获取推荐数据
    async getCommend() {
      const res = await this.$http.get(`/commend`);
      // console.log(res);
      this.commendList = res.data;
    },
    // 去推荐的视频页面
    toPlayPage(id) {
      this.$router.push(`/play/${id}`);
      this.getPlayInfo();
    },
    //  获取用户数据
    async getUserInfo() {
      const res = await this.$http.get(`/user/${localStorage.getItem("id")}`);
      this.userInfo = res.data[0];
    },
    async getComment() {
      const res = await this.$http.get(`/comment/${this.$route.params.id}`);
      console.log(res);
      this.commentList = res.data
    },
   async commnet (val) {
      const date  = new Date()

      let mm = date.getMonth()+1
      let dd = date.getDate()
      if (mm < 10) {
        mm = '0' + mm
      }
       if (dd < 10) {
        dd = '0' + dd
      }
      let str = `${mm}-${dd}`
      this.commentInfo.comment_date = str
      this.commentInfo.article_id = this.$route.params.id
     if (this.commentInfo.comment_content !== '') {
         const res = await this.$http.post(`/comment_post/${localStorage.getItem("id")}`,this.commentInfo)
         console.log(res)
     }else {
       return this.$message.fail("请说点什么吧")
     }
     this.commentInfo.comment_content = ''
     this.getComment()
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  background-color: #fff;
  .title {
    margin-top: 2.778vw;
    margin-left: 2.778vw;
    font-size: 3.889vw;
  }
  .date {
    margin-left: 3.66vw;
    margin-top: 5px;
    font-size: 3.889vw;
    .a {
      font-size: 15px;
    }
    .b {
      font-size: 12px;
      margin-left: 15px;
      color: #afadad;
    }
    .c {
      font-size: 12px;
      color: #afadad;
      margin-left: 15px;
    }
    .d {
      font-size: 12px;
      color: #afadad;
      margin-left: 15px;
    }
  }
  .share {
    margin-top: 2.778vw;
    margin-left: 3.66vw;
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: solid 1px #e7e7e7;

    span:nth-child(1) {
      margin-right: 15px;
    }
    span:nth-child(2) {
      margin-right: 15px;
    }
  }
}
.van-button__text {
  color: #fe7299;
}
.van-button__icon {
  color: #fe7299;
}
.item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
  .img {
    width: 45%;
    margin: 1.389vw 0 0 0;
  }
  .name {
    font-size: 3.611vw;
  }
  .span {
    position: absolute;
    font-size: 3.333vw;
    color: #555353;
    margin-top: 24.2vw;
    margin-left: 0.8vw;
  }
}
.input {
  display: flex;
  align-items: center;
  .img {
    width: 6.667vw;
    height: 6.667vw;
    border-radius: 50%;
    margin-left: 15px;
    margin-right: 15px;
  }
  .ipt {
    background-color: #e7e7e7;
    border-radius: 10px;
    border: none;
    line-height: 23px;
    font-size: 13px;
    width: 60vw;
    margin-right: 15px;
  }
  .btn{
    border: none;
    background-color: #fe7299;
    color: #fff;
    border-radius: 20px;
  }
}
.comment-up{
  margin-top: 15px;
  display: flex;
  align-items: center;
   .img {
    width: 6.667vw;
    height: 6.667vw;
    border-radius: 50%;
    margin-left: 15px;
    margin-right: 15px;
  }
  .a{
      font-size: 15px;
      color: #9c9999;
   }
  .b{
    font-size: 15px;
    margin-left: 250px;
    color: #9c9999;
  }
}
.comment-down{
  padding: 0 30px 0 48px;
  font-size: 13px;
  border-bottom: 1px solid #e7e7e7;
}
</style>
